<template>
  <div>
    <!-- template中使用this可以省略 -->
    <!-- 组件访问store state中数据第一种方法 -->
    <!-- <h3>当前最新的count：{{ this.$store.state.count }}</h3> -->
    <!-- 组件访问state中数据第二种方法 -->
    <!-- <h3>当前最新的count：{{ count }}</h3> -->
    <!-- 使用getters第一种方式 -->
    <h3>{{ $store.getters.showNum }}</h3>
    <button @click="addHandle1">+1</button>
    <button @click="addHandle2">+N</button>
    <button @click="addHandle3">+1 Async</button>
    <button @click="addHandle4">+1 Async</button>
  </div>
</template>
<script>
import { mapState } from 'vuex' // 1. 按需导入mapState函数
export default {
  data() {
    return {

    }
  },
  methods: {
    addHandle1() {
      //  this.$store.state.count++ 不允许组件直接修改全局变量，且无法监控到是哪个方法修改数据，错误语法
      this.$store.commit('add');
    },
    addHandle2() {  // mutation传参
      this.$store.commit('addN', 3);
    },
    addHandle3() {
      // dispatch专门触发action
      this.$store.dispatch('addAsync')
    },
    addHandle4() {
      this.$store.dispatch('addNAsync', 5)
    }
  },
  computed: { // 2. computed计算属性，映射全局数据
    ...mapState(['count'])
  }
}
</script>